<template>
  <div class="materials-list">
    <div v-if="!parsedMaterials.length" class="no-materials">
      <n-text :depth="3" style="font-size: 12px;">无材料</n-text>
    </div>
    <div v-else class="materials-container">
      <n-tooltip
        v-for="material in parsedMaterials"
        :key="material.id"
        placement="top"
        :show-arrow="false"
      >
        <template #trigger>
          <div class="material-item">
            <div :class="['material-image-wrapper', `grade-border-${material.grade || 1}`]">
              <n-image
                :src="material.image || '/images/default-item.png'"
                :width="24"
                :height="24"
                class="material-image"
                :fallback-src="'/images/default-item.png'"
              />
              <div class="material-count">{{ material.count }}</div>
            </div>
          </div>
        </template>
        <div class="material-tooltip">
          <div class="material-name">{{ material.name }}</div>
          <div class="material-info">
            <span style="font-size: 12px; color: #374151;">
              数量: {{ material.count }}
            </span>
          </div>
          <div v-if="material.description" class="material-description">
            <span style="font-size: 11px; color: #6b7280;">
              {{ material.description }}
            </span>
          </div>
        </div>
      </n-tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { MaterialInfo } from '@/types/specialOperation'

// 定义材料项接口
interface ParsedMaterial {
  id: string
  name: string
  image: string
  count: number
  grade: number
  description?: string
}

// 组件属性
interface Props {
  materials: string // 材料字符串，格式: "id1:count1,id2:count2"
  materialInfos: Record<string, MaterialInfo> // 材料信息缓存
}

const props = withDefaults(defineProps<Props>(), {
  materials: '',
  materialInfos: () => ({})
})

// 解析材料字符串
const parseCustomMaterials = (rawMaterials: string): Record<string, number> => {
  if (!rawMaterials || typeof rawMaterials !== 'string') {
    return {}
  }
  
  const materials: Record<string, number> = {}
  try {
    const pairs = rawMaterials.split(',')
    for (const pair of pairs) {
      const trimmedPair = pair.trim()
      if (!trimmedPair) continue
      
      const parts = trimmedPair.split(':')
      if (parts.length === 2) {
        const id = parts[0].trim()
        const countStr = parts[1].trim()
        const count = parseInt(countStr, 10)
        
        if (id && !isNaN(count) && count > 0) {
          materials[id] = count
        }
      }
    }
  } catch (error) {
    console.warn('解析材料字符串失败:', error)
    return {}
  }
  
  return materials
}

// 解析后的材料列表
const parsedMaterials = computed<ParsedMaterial[]>(() => {
  const materialsObject = parseCustomMaterials(props.materials)
  
  if (Object.keys(materialsObject).length === 0) {
    return []
  }

  return Object.entries(materialsObject).map(([id, count]) => {
    const materialInfo = props.materialInfos[id] || {
      item_id: id,
      name: `材料#${id.slice(-4)}`,
      image: '',
      grade: 1,
      description: '',
      type: '',
      sub_type: '',
      from_cache: false
    }
    
    return {
      id,
      name: materialInfo.name,
      image: materialInfo.image,
      count: count,
      grade: materialInfo.grade,
      description: materialInfo.description
    }
  })
})
</script>

<style scoped>
.materials-list {
  display: flex;
  align-items: center;
  min-height: 32px;
}

.no-materials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 32px;
}

.materials-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  max-width: 200px;
}

.material-item {
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.material-item:hover {
  transform: scale(1.1);
}

.material-image-wrapper {
  position: relative;
  border-radius: 4px;
  padding: 1px;
  background: linear-gradient(135deg, var(--grade-color), var(--grade-color-light));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: inline-block;
  line-height: 0;
  width: 26px;
  height: 26px;
}

.material-image {
  border-radius: 3px;
  display: block;
  line-height: 0;
}

/* 修复NImage组件的额外空间 */
:deep(.material-image .n-image) {
  display: block;
  line-height: 0;
}

:deep(.material-image .n-image img) {
  display: block;
  vertical-align: top;
}

.material-count {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 3px;
  border-radius: 2px;
  line-height: 1;
  min-width: 12px;
  text-align: center;
}

/* 等级边框颜色 */
.grade-border-1 {
  --grade-color: #909399;
  --grade-color-light: #c0c4cc;
}

.grade-border-2 {
  --grade-color: #67c23a;
  --grade-color-light: #95d475;
}

.grade-border-3 {
  --grade-color: #409eff;
  --grade-color-light: #79bbff;
}

.grade-border-4 {
  --grade-color: #9c27b0;
  --grade-color-light: #ba68c8;
}

.grade-border-5 {
  --grade-color: #e6a23c;
  --grade-color-light: #f0c78a;
}

.grade-border-6 {
  --grade-color: #f56c6c;
  --grade-color-light: #f89898;
}

/* 工具提示样式 */
.material-tooltip {
  padding: 8px;
  max-width: 200px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.material-name {
  font-weight: 600;
  margin-bottom: 4px;
  color: #1f2937;
  font-size: 13px;
}

.material-info {
  margin-bottom: 2px;
  color: #374151;
}

.material-description {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .materials-container {
    max-width: 150px;
    gap: 2px;
  }
  
  .material-image-wrapper {
    width: 22px;
    height: 22px;
  }
  
  .material-count {
    font-size: 9px;
    padding: 0px 2px;
  }
}
</style>
